<template>
  <div v-for="(item, index) in state.arr" :key="index">
    <p>姓名: {{ item.name }}</p>
    <p>职业: {{ item.work }}</p>
    <p>爱好：<span>{{ item.hobby.a.b }}</span></p>
  </div>
  <button @click="change">修改</button>
</template>
<script>
import {reactive} from 'vue'
export default{
  setup(){
    const state = reactive({
      arr:[
        {
          name:'尼克',
          work:'前端开发',
          hobby:{
            a:{
              b:1
            }
          }
        },
        {
          name:'十三',
          work:'后端开发',
          hobby:{
            a:{
              b:2
            }
          }
        }
      ]
    })
    const change = () =>{
      state.arr[1].name='十四'
      state.arr[1].hobby.a.b='3'
    }
    return {state, change}
  }
}
</script>